<template>
  <div class="fill-width-height">
    <el-card>
      <template #header>
        <h2>图片抓取配置</h2>
      </template>
      <el-form ref="formRef" :model="formData" label-width="150px">
        <el-form-item label="启用远程">
          <el-switch v-model="formData.enableRemote" placeholder="是否启用远程"></el-switch>
        </el-form-item>
      <el-form-item label="驱动路径" v-if="!formData.enableRemote">
          <el-input v-model="formData.driver" placeholder="请输入驱动路径"></el-input>
        </el-form-item>
        <el-form-item label="浏览器路径启动文件" v-if="!formData.enableRemote">
          <el-input v-model="formData.binarypath" placeholder="请输入浏览器路径启动文件"></el-input>
        </el-form-item>
        <el-form-item label="远程地址" v-if="formData.enableRemote">
          <el-input v-model="formData.remoteWebDriverUrl" placeholder="请输入浏览器远程地址"></el-input>
        </el-form-item>

        <el-form-item label="禁用Gup加速">
          <el-switch v-model="formData.disableGup" placeholder="是否禁用Gup加速"></el-switch>
        </el-form-item>
        <el-form-item label="禁用沙盒模式">
          <el-switch v-model="formData.noSandbox" placeholder="是否禁用沙盒模式"></el-switch>
        </el-form-item>
        <el-form-item label="开启无头模式" >
          <el-switch v-model="formData.noheadless" placeholder="是否开启无头模式"></el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveConfig">保存配置</el-button>
        </el-form-item>
      </el-form>
      <el-collapse accordion>
        <el-collapse-item title="chromedriver下载地址">
          <ul>
            <li>
              <span>版本在114及以下：</span>
              <el-link :href="'http://chromedriver.storage.googleapis.com/index.html'" target="_blank">点击下载</el-link>
            </li>
            <li>
              <span>版本在127：</span>
              <el-link :href="'https://googlechromelabs.github.io/chrome-for-testing/#stable'" target="_blank">点击下载</el-link>
            </li>
            <li>
              <span>其他下载地址：</span>
              <el-link :href="'https://gitcode.com/gh_mirrors/ch/chrome-for-testing?utm_source=highlight_word_gitcode&word=chrome-for-testing'" target="_blank">点击下载</el-link>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
import { getWebDriverConfig, saveWebDriverConfig } from '@/api/imgManage/appManage'

export default {
  name: 'MiniProgramConfig',
  components: {},
  props: {},
  data() {
    return {
      formData: {
        driver: '',
        binarypath: '',
        enableRemote: false,
        remoteWebDriverUrl: '',
        disableGup: false,
        noSandbox: false,
        noheadless: false
      }
    };
  },
  computed: {},
  methods: {
    fetchConfigList() {
      getWebDriverConfig().then(response => {
        this.formData = response.data;
        if(response?.data?.enableRemote){
          this.formData.enableRemote = this.formData?.enableRemote === 'true'

          this.formData.disableGup = this.formData?.disableGup === 'true'
          this.formData.noSandbox = this.formData?.noSandbox === 'true'
          this.formData.noheadless = this.formData?.noheadless === 'true'
        }
      }).catch(error => {
        console.error('获取配置列表失败:', error);
      });
    },
    saveConfig() {
      saveWebDriverConfig( this.formData ).then(response => {
        this.$message.success('配置保存成功');
      }).catch(error => {
        this.$message.success('配置保存失败，'+ error);
      });
    }
  },
  mounted() {
    this.fetchConfigList()
  }
};
</script>

<style scoped lang="scss">
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

span {
  margin-right: 10px;
}
</style>
